<template>
	<view
		style="height: 100rpx;padding:0 150rpx;box-sizing: border-box;align-items: center;background-color: transparent;"
		class="flex-between w100p">

		<view style="height: 100%;width: auto;" class="flex-center valign-center">
			
		</view>
		<view class="flex-around gap8 font12">

			<view v-if="userInfoModel.data?.id==null">
				<view type="default" style="background-color: transparent;color: white;" class="font22" @click="exit">登录
				</view>
			</view>
			<view v-else class="flex-column ">
				<view class="vAlign-center " @click="showMenu ">
					<img class="avatar" :src="userInfoModel.data?.avatar??'@/../static/img/avatar.jpg'" />
					<view type="default" style="background-color: transparent;color:white;" class="font14">
						{{userInfoModel.data?.name || userInfoModel.data?.nickName}}
					</view>
				</view>
				<view class='custom'>
					<gui-popup-menu @hideMenu="hideMenu" ref="gracePopupMenu" arrowDirection="right"
						background="rgba(0,0,0,0)">
						<view class="gui-bg-white gui-dark-bg-level-3" style="border-radius:8rpx; padding:15rpx;">

							<view class="meus-item vAlign-center border-bottom">
								<text class="menus gui-block gui-primary-text" @tap.stop="exit" data-id="3">退出登陆</text>
							</view>
						</view>
					</gui-popup-menu>
				</view>
			</view>
			<view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo
	} from '@/store/Pinia/userInfo.js'

	export default {
		name: "tabbar",
		data() {
			return {
				userInfoModel: {}
			};
		},
		mounted() {
			this.userInfoModel = userInfo()
			console.log('userInfoModel', this.userInfoModel.data)
		},
		methods: {
			showMenu: function() {
				this.$refs.gracePopupMenu.open();
			},
			exit() {
				// uni.navigateTo({
				// 	url:'/pages/login/index'
				// })
				uni.reLaunch({
					url: '/pages/login/index',

				})
			},
			navigateTo() {
				uni.navigateTo({
					url: '/pages/appointment/record/record'
				})
			}
		}
	}
</script>

<style>
	.logo {
		--logoWidth: 90rpx;
		width: var(--logoWidth);
		height: var(--logoWidth);
		margin: 15rpx 30rpx;
	}

	.tex {
		color: white;
		font-size: 1.5em;
	}

	.avatar {
		--avatarWidth: 80rpx;
		width: var(--avatarWidth);
		height: var(--avatarWidth);
		border-radius: 50%;
		margin: 18rpx 36rpx;
	}

	/deep/.custom .gui-popup-mask {
		width: 100%;
	}

	.meus-item {
		height: 70rpx;
		padding: 0 20rpx;
	}
</style>